<template>
  <div class="screenFull">
    <IconPark
      :size="24"
      type="off-screen"
      color="#000"
      v-if="isFullscreen"
      @click="toggleFullscreen"
    />
    <IconPark
      :size="24"
      type="full-screen"
      color="#000"
      v-else
      @click="toggleFullscreen"
    />
  </div>
</template>

<script setup>
import IconPark from "@/components/library/IconPark.vue";
import { useFullscreen } from '@vueuse/core'
const { toggle, isFullscreen } = useFullscreen()
/** 全屏、退出全屏单击事件 */
const toggleFullscreen = () => {
  toggle()
}
defineOptions({
  name: "ScreenFull",
});
</script>

<style lang="scss" scoped>
.screenFull {
  display: inline-block;
  margin-left: 24px;
}
</style>
